<template>
  <div class="container">
    <!-- 卡片视图区 -->
    <el-card id="tiao">
      <!-- <h2>发布菜谱</h2> -->
      <!-- 提示信息 -->
      <el-alert title="添加菜谱信息" type="info" center show-icon></el-alert>
      <!-- 步骤条 -->
      <el-steps :space="200" :active="activeNum - 0" finish-status="success" align-center>
        <el-step title="菜谱信息"></el-step>
        <el-step title="食材清单"></el-step>
        <el-step title="菜谱步骤"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- tab标签 -->
      <el-tabs :tab-position="tabPosition" :before-leave="beforeLeave">
        <el-tab-pane label="菜谱信息">
          <el-form ref="form">
            <div class="imgmin" @click="tu">
              <img src alt class="imgminadd" ref="addtu" />
              <p id="imgmintu" ref="content">添加步骤图</p>
            </div>
            <input type="file" name="fileName" class="btn" ref="bu" @change="img" />
            <el-form ref="form" :model="form" label-width="80px">
              <el-input v-model="input" placeholder="菜谱名称"></el-input>
              <el-select v-model="form.region" placeholder="请选择烹饪难度">
                <el-option label="切墩（初级）" value="切墩（初级）"></el-option>
                <el-option label="配菜（中级）" value="配菜（中级）"></el-option>
                <el-option label="掌勺（高级）" value="掌勺（高级）"></el-option>
              </el-select>
              <el-select v-model="form.region1" placeholder="请选择烹饪时间">
                <el-option label="10分钟左右" value="10分钟左右"></el-option>
                <el-option label="10-30分钟" value="10-30分钟"></el-option>
                <el-option label="30-60分钟" value="30-60分钟"></el-option>
                <el-option label="1个小时以上" value="1个小时以上"></el-option>
              </el-select>
              <el-input
                type="textarea"
                :autosize="{ minRows: 8, maxRows: 12}"
                placeholder="这道菜背后的故事"
                v-model="textarea"
              ></el-input>
            </el-form>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="食材清单">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="食材："></el-form-item>
                  <el-input v-model="form.name1" placeholder="如：五花肉"></el-input>
                  <el-input v-model="form.name2"></el-input>
                  <el-input v-model="form.name3"></el-input>
                  <el-input v-model="form.name4"></el-input>
                  <el-input v-model="form.name5"></el-input>
                </el-form>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="用量："></el-form-item>
                  <el-input v-model="form.name11" placeholder="如：250g"></el-input>
                  <el-input v-model="form.name21"></el-input>
                  <el-input v-model="form.name31"></el-input>
                  <el-input v-model="form.name41"></el-input>
                  <el-input v-model="form.name51"></el-input>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="菜谱步骤" @click="submitfood">
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <div class="imgmin" @click="tu1">
                  <img src alt class="imgminadd" ref="addtu1" />
                  <p id="imgmintu" ref="content1">添加步骤图</p>
                </div>
                <input type="file" name="fileName1" class="btn" ref="bu1" @change="img1" />
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content bg-purple-light" id="gushi">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 8, maxRows: 12}"
                  placeholder="具体步骤如下"
                  v-model="textarea1"
                ></el-input>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <div class="imgmin" @click="tu2">
                  <img src alt class="imgminadd" ref="addtu2" />
                  <p id="imgmintu" ref="content2">添加步骤图</p>
                </div>
                <input type="file" name="fileName2" class="btn" ref="bu2" @change="img2" />
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content bg-purple-light" id="gushi">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 8, maxRows: 12}"
                  placeholder="具体步骤如下"
                  v-model="textarea2"
                ></el-input>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <div class="imgmin" @click="tu3">
                  <img src alt class="imgminadd" ref="addtu3" />
                  <p id="imgmintu" ref="content3">添加步骤图</p>
                </div>
                <input type="file" name="fileName3" class="btn" ref="bu3" @change="img3" />
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content bg-purple-light" id="gushi">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 8, maxRows: 12}"
                  placeholder="具体步骤如下"
                  v-model="textarea3"
                ></el-input>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <div class="imgmin" @click="tu4">
                  <img src alt class="imgminadd" ref="addtu4" />
                  <p id="imgmintu" ref="content4">添加步骤图</p>
                </div>
                <input type="file" name="fileName4" class="btn" ref="bu4" @change="img4" />
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content bg-purple-light" id="gushi">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 8, maxRows: 12}"
                  placeholder="具体步骤如下"
                  v-model="textarea4"
                ></el-input>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <div class="imgmin" @click="tu5">
                  <img src alt class="imgminadd" ref="addtu5" />
                  <p id="imgmintu" ref="content5">添加步骤图</p>
                </div>
                <input type="file" name="fileName5" class="btn" ref="bu5" @change="img5" />
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content bg-purple-light" id="gushi">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 8, maxRows: 12}"
                  placeholder="具体步骤如下"
                  v-model="textarea5"
                ></el-input>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <div class="imgmin" @click="tu6">
                  <img src alt class="imgminadd" ref="addtu6" />
                  <p id="imgmintu" ref="content6">添加步骤图</p>
                </div>
                <input type="file" name="fileName6" class="btn" ref="bu6" @change="img6" />
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content bg-purple-light" id="gushi">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 8, maxRows: 12}"
                  placeholder="具体步骤如下"
                  v-model="textarea6"
                ></el-input>
              </div>
            </el-col>
          </el-row>
          <input type="checkbox" />独家菜谱（此菜仅在食界发布）
          <div class="xian"></div>
          <!-- <input type="button" value="发布" id="submit" @click="submit" /> -->
          <el-button :plain="true" @click="submit" id="submit">发布</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
export default {
  data() {
    return {
      form: {
        name: "",
        name1: "",
        name11: "",
        name2: "",
        name21: "",
        name3: "",
        name31: "",
        name4: "",
        name41: "",
        name5: "",
        name51: "",
        region: "",
        region1: ""
      },
      tabPosition: "left",
      activeNum: 0,
      input: "",
      textarea: "",
      textarea1: "",
      textarea2: "",
      textarea3: "",
      textarea4: "",
      textarea5: "",
      textarea6: "",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      file: [],
      userId: 0,
      menuId: 0
    };
  },
  created() {
    this.$axios.defaults.headers.common["Authorization"] = localStorage.getItem(
      "MyToken"
    );
    this.$axios
      .get("/api/users/getUserInfo")
      .then(res => {
        console.log("user", res.data.data[0].userId);
        this.userId = res.data.data[0].userId;
      })
      .catch(err => {
        console.log(err);
      });
    this.$axios
      .get("/api/createMenu/getMenuId")
      .then(res => {
        console.log("menuId", res.data.data[0].MenuId);
        this.menuId = res.data.data[0].MenuId + 1;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    submitfood() {
      this.$axios
        .get("/api/createMenu/foodsubmit", {
          params: {
            name1: this.form.name1,
            name11: this.form.name11,
            name2: this.form.name2,
            name21: this.form.name21,
            name3: this.form.name3,
            name31: this.form.name31,
            name4: this.form.name4,
            name41: this.form.name41,
            name5: this.form.name5,
            name51: this.form.name51,
            menuId: this.menuId
          }
        })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    beforeLeave(activeName, oldActiveName) {
      // activeName打印出来是分别是0，1,2....
      this.activeNum = activeName;
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    uploadImg($event) {
      this.file.push($event.target.files[0]);
    },
    submit() {
      let paramsData = new FormData();
      paramsData.append("userId", this.userId);
      paramsData.append("menuId", this.menuId);
      paramsData.append("menuName", this.input);
      paramsData.append("select1", this.form.region);
      paramsData.append("select2", this.form.region1);
      paramsData.append("textarea", this.textarea);
      paramsData.append("textarea1", this.textarea1);
      paramsData.append("textarea2", this.textarea2);
      paramsData.append("textarea3", this.textarea3);
      paramsData.append("textarea4", this.textarea4);
      paramsData.append("textarea5", this.textarea5);
      paramsData.append("textarea6", this.textarea6);
      paramsData.append("fileName", this.file[0]);
      paramsData.append("fileName1", this.file[1]);
      paramsData.append("fileName2", this.file[2]);
      paramsData.append("fileName3", this.file[3]);
      paramsData.append("fileName4", this.file[4]);
      paramsData.append("fileName5", this.file[5]);
      paramsData.append("fileName6", this.file[6]);

      this.$axios
        .post("/api/createMenu/create", paramsData)
        .then(res => {
          if (res.data.data.length != 0) {
            this.$message({
              message: "发布菜谱成功",
              type: "success"
            });
            this.$router.push("/menu");
          }
        })
        .catch(err => {});
    },
    tu() {
      this.$refs.bu.click();
    },
    tu1() {
      this.$refs.bu1.click();
    },
    tu2() {
      this.$refs.bu2.click();
    },
    tu3() {
      this.$refs.bu3.click();
    },
    tu4() {
      this.$refs.bu4.click();
    },
    tu5() {
      this.$refs.bu5.click();
    },
    tu6() {
      this.$refs.bu6.click();
    },
    img($event) {
      this.file.push($event.target.files[0]);
      var fileReader = new FileReader();
      var reg = /^image/gi;
      var _this = this;
      var flag = reg.test(this.$refs.bu.files[0].type);
      if (flag) {
        fileReader.onload = function(e) {
          _this.$refs.addtu.src = e.target.result;
          _this.$refs.content.innerHTML = "";
        };
        fileReader.readAsDataURL(this.$refs.bu.files[0]);
      } else {
        alert("图片上传失败！");
      }
    },
    img1($event) {
      this.file.push($event.target.files[0]);
      var fileReader1 = new FileReader();
      var reg1 = /^image/gi;
      var _this = this;
      var flag1 = reg1.test(this.$refs.bu1.files[0].type);
      if (flag1) {
        fileReader1.onload = function(e) {
          _this.$refs.addtu1.src = e.target.result;
          _this.$refs.content1.innerHTML = "";
        };
        fileReader1.readAsDataURL(this.$refs.bu1.files[0]);
      } else {
        alert("图片上传失败！");
      }
    },
    img2($event) {
      this.file.push($event.target.files[0]);
      var fileReader2 = new FileReader();
      var reg2 = /^image/gi;
      var _this = this;
      var flag2 = reg2.test(this.$refs.bu2.files[0].type);
      if (flag2) {
        fileReader2.onload = function(e) {
          _this.$refs.addtu2.src = e.target.result;
          _this.$refs.content2.innerHTML = "";
        };
        fileReader2.readAsDataURL(this.$refs.bu2.files[0]);
      } else {
        alert("图片上传失败！");
      }
    },
    img3($event) {
      this.file.push($event.target.files[0]);
      var fileReader3 = new FileReader();
      var reg3 = /^image/gi;
      var _this = this;
      var flag3 = reg3.test(this.$refs.bu3.files[0].type);
      if (flag3) {
        fileReader3.onload = function(e) {
          _this.$refs.addtu3.src = e.target.result;
          _this.$refs.content3.innerHTML = "";
        };
        fileReader3.readAsDataURL(this.$refs.bu3.files[0]);
      } else {
        alert("图片上传失败！");
      }
    },
    img4($event) {
      this.file.push($event.target.files[0]);
      var fileReader4 = new FileReader();
      var reg4 = /^image/gi;
      var _this = this;
      var flag4 = reg4.test(this.$refs.bu4.files[0].type);
      if (flag4) {
        fileReader4.onload = function(e) {
          _this.$refs.addtu4.src = e.target.result;
          _this.$refs.content4.innerHTML = "";
        };
        fileReader4.readAsDataURL(this.$refs.bu4.files[0]);
      } else {
        alert("图片上传失败！");
      }
    },
    img5($event) {
      this.file.push($event.target.files[0]);
      var fileReader5 = new FileReader();
      var reg5 = /^image/gi;
      var _this = this;
      var flag5 = reg5.test(this.$refs.bu5.files[0].type);
      if (flag5) {
        fileReader5.onload = function(e) {
          _this.$refs.addtu5.src = e.target.result;
          _this.$refs.content5.innerHTML = "";
        };
        fileReader5.readAsDataURL(this.$refs.bu5.files[0]);
      } else {
        alert("图片上传失败！");
      }
    },
    img6($event) {
      this.file.push($event.target.files[0]);
      var fileReader6 = new FileReader();
      var reg6 = /^image/gi;
      var _this = this;
      var flag6 = reg6.test(this.$refs.bu6.files[0].type);
      if (flag6) {
        fileReader6.onload = function(e) {
          _this.$refs.addtu6.src = e.target.result;
          _this.$refs.content6.innerHTML = "";
        };
        fileReader6.readAsDataURL(this.$refs.bu6.files[0]);
      } else {
        alert("图片上传失败！");
      }
    }
  }
};
</script>

<style lang="css" scoped>
.container #tiao {
  padding: 30px;
}
.el-steps {
  margin-top: 40px;
  margin-bottom: 40px;
}
.container {
  margin-top: 110px;
  margin-bottom: 60px;
}
#img {
  background-color: #ccc;
  border-radius: 10px;
  margin: 15px;
  height: 320px;
}
.el-input,
.el-textarea {
  margin: 20px;
  margin-top: 0;
  width: 80%;
}
.el-select {
  margin: 20px;
  margin-top: 0;
}
#tu {
  margin: 10px;
  padding: 10px;
  margin-top: 0;
}
.el-form-item {
  margin-bottom: 0;
}
/* 步骤 */
.imgmin {
  width: 85%;
  height: 180px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 5px;
  margin: 15px;
}
.imgmin p {
  text-align: center;
  margin-top: 50px;
}
#gushi {
  padding-top: 16px;
}
#submit {
  width: 150px;
  height: 45px;
  border: 1px solid #e6a23c;
  background-color: #e6a23c;
  border-radius: 5px;
  font-size: 20px;
  color: white;
  margin-right: 40px;
  margin-bottom: 30px;
}
.xian {
  border: 0;
  width: 90%;
  border-top: 1px solid #ccc;
  margin-top: 20px;
  margin-bottom: 20px;
}
.btn {
  display: none;
}
.imgminadd {
  width: 100%;
  height: 180px;
}
</style>